const path = require("path");
module.exports = {
    mode:"development",
    entry:path.resolve(__dirname,"./src/index.js"),
    output:{
        path:path.resolve(__dirname,"./dist"),
        filename:'[name].js'  // 定义一个变量导出
    },
    module:{
        rules:[
            {   //raw-loader配置
                test: /\.(txt|md)$/,  // 正则表达式 ，遇到 .txt 或者是 .md的文件 使用 raw-loader 处理
                use: 'raw-loader'
        	},
            {
                test: /\.m?js$/,  // 后缀是  js 或者是 mjs 通过 babel-loader 处理
                exclude: /node_modules/,  // 排除 node_modules 目录
                use: {
                    loader: 'babel-loader',  //使用 babel-loader 处理 
                    options: {  // 是babel-loader的配置项
                        presets: [
                            ['@babel/preset-env', { targets: { chrome: "58", ie: "11" } }] // 需要把js转成 chrome 58  ie 11  可以支持的语法 
                        ]
                    }
                }
            },

            {  //url-loader配置
                test: /\.(png|jpe?g|gif)$/,  // 处理的文件后缀
                use: {
                    loader: "url-loader",  // 使用 url-loader
                    options: {  // url-loader的配置项
                        // placeholder 占位符 [name] 源资源模块的名称
                        // [ext] 源资源模块的后缀
                        name: "[name]_[hash].[ext]", // 打包之后 图片的名称 原名字加hash数加原后缀
                        //打包后的存放位置
                        outputPath: "./images", // 输出图片的路径
                        // 打包后文件的 url
                        publicPath: './images',  // 引入 图片的路径
                        // 小于 100 字节转成 base64 格式 ：不生成图片，变成字符串写在js文件中， 利用字符串 描述图片的所有像素点。
                        limit: 100  //当前图片大小大于100就生成文件及图片
                    }
                }
            },
            {//处理css文件，css-loder和style-loader
                test: /\.css$/,
                use: ["style-loader", "css-loader"]//都需要，并且是有顺序的，从后往前执行
            },
            {//处理less文件
                test: /\.less$/i,
                use: [
                    //use中loader加载是有顺序的，先下后上，注意有的loader需要按照顺序书写
                    "style-loader",
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
}